import React, { useRef, useState, useEffect } from 'react';
import { Button } from 'antd';
import './video.scss' // 引入 CSS 文件
// 定义 Video 组件
const Video: React.FC = () => {
  // 创建对 DOM 元素的引用
  const videoRef = useRef<HTMLVideoElement | null>(null); // 视频播放元素的引用
  const recPlayerRef = useRef<HTMLVideoElement | null>(null); // 录制回放元素的引用
  const pictureRef = useRef<HTMLCanvasElement | null>(null); // 捕获画布元素的引用
  const filtersRef = useRef<HTMLSelectElement | null>(null); // 滤镜选择框的引用
  const audioInputRef = useRef<HTMLSelectElement | null>(null); // 音频输入选择框的引用
  const audioOutputRef = useRef<HTMLSelectElement | null>(null); // 音频输出选择框的引用
  const videoSourceRef = useRef<HTMLSelectElement | null>(null); // 视频源选择框的引用

  // 设置 MediaRecorder 实例和录制状态
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null); // 用于录制的 MediaRecorder 实例
  const [recording, setRecording] = useState<boolean>(false); // 录制状态
  const [buffer, setBuffer] = useState<Blob[]>([]); // 存储录制数据的缓冲区
// 摄像头状态
  const [cameraStatus, setCameraStatus] = useState<boolean>(false); // 摄像头状态

  useEffect(() => {
    // 获取用户设备列表并更新选择框
    navigator.mediaDevices.enumerateDevices().then(devices => {
      const videoInputs = devices.filter(device => device.kind === 'videoinput'); // 过滤出视频输入设备
      const audioInputs = devices.filter(device => device.kind === 'audioinput'); // 过滤出音频输入设备
      const audioOutputs = devices.filter(device => device.kind === 'audiooutput'); // 过滤出音频输出设备

      // 更新视频源选择框
      if (videoSourceRef.current) {
        videoSourceRef.current.innerHTML = videoInputs.map(device => `<option value="${device.deviceId}">${device.label}</option>`).join('');
      }
      // 更新音频输入选择框
      if (audioInputRef.current) {
        audioInputRef.current.innerHTML = audioInputs.map(device => `<option value="${device.deviceId}">${device.label}</option>`).join('');
      }
      // 更新音频输出选择框
      if (audioOutputRef.current) {
        audioOutputRef.current.innerHTML = audioOutputs.map(device => `<option value="${device.deviceId}">${device.label}</option>`).join('');
      }
    });
    startCamera(); // 调用函数启动摄像头
  }, []); // 依赖数组为空，确保只在组件挂载时运行

  
    // 启动摄像头并设置 MediaRecorder
    const startCamera = async () => {
      const filters = filtersRef.current?.value || ''; // 获取选择的滤镜
      const video = videoRef.current; // 获取视频元素
      const videoSource = videoSourceRef.current?.value || ''; // 获取当前选择的视频源
      try {
        // 获取用户的媒体流，包括视频和音频
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { deviceId: videoSource ? { exact: videoSource } : undefined }, // 设置视频源
          audio: true // 启用音频
        });

        // 将视频流赋给 video 元素
        if (video&&videoRef.current) {
          video.className = filters; // 应用选择的滤镜到画布
          videoRef.current.srcObject = stream;
        }

        // 创建 MediaRecorder 实例并开始录制
        const recorder = new MediaRecorder(stream);
        recorder.ondataavailable = (event: BlobEvent) => {
          setBuffer(prev => [...prev, event.data]); // 将录制数据添加到缓冲区
        };
        recorder.start(); // 启动录制
        setMediaRecorder(recorder); // 保存 MediaRecorder 实例
      } catch (error) {
        console.error('获取用户媒体设备失败:', error); // 处理错误
      }
    };

  // 开始录制
  const startRecord = async () => {
    const filters = filtersRef.current?.value || ''; // 获取选择的滤镜
    const video = videoRef.current; // 获取视频元素
    const videoSource = videoSourceRef.current?.value || ''; // 获取当前选择的视频源
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { deviceId: videoSource ? { exact: videoSource } : undefined }, // 设置视频源
      audio: true // 启用音频
    });
    if (video&&videoRef.current) {
      video.className = filters; // 应用选择的滤镜到画布
      videoRef.current.srcObject = stream; // 将视频流赋给 video 元素
    }
    const recorder = new MediaRecorder(stream); // 创建 MediaRecorder 实例
    recorder.ondataavailable = (event: BlobEvent) => {
      setBuffer(prev => [...prev, event.data]); // 将录制数据添加到缓冲区
    };
    recorder.start(); // 启动录制
    setMediaRecorder(recorder); // 保存 MediaRecorder 实例
  };

  // 停止录制
  const stopRecord = () => {
    if (mediaRecorder) {
      mediaRecorder.stop(); // 停止录制
      setMediaRecorder(null); // 清空 MediaRecorder 实例
    }
  };

    // 关闭摄像头
    const stopCamera = () => {
      // 关闭摄像头
      if (videoRef.current) {
        videoRef.current.pause();  
        videoRef.current.srcObject = null; // 清除视频源
        // 如果在录制，则停止录制
        if (recording) {
          stopRecord()
        }
      }
    };


  // 捕获当前视频画面并绘制到画布上
  const captureImage = () => {
    const picture = pictureRef.current; // 获取画布元素
    const video = videoRef.current; // 获取视频元素
    const filters = filtersRef.current?.value || ''; // 获取选择的滤镜
    if (picture && video) {
      picture.className = filters; // 应用选择的滤镜到画布
      const context = picture.getContext('2d'); // 获取画布上下文
      if (context) {
        context.drawImage(video, 0, 0, picture.width, picture.height); // 将视频画面绘制到画布上
      }
    }
  };

  // 播放录制的视频
  const playRecording = () => {
    // 添加滤镜
    
    const video = recPlayerRef.current; // 获取视频元素
    const filters = filtersRef.current?.value || ''; // 获取选择的滤镜
    if (video&&recPlayerRef.current) {
      video.className = filters; // 应用选择的滤镜到视频
      recPlayerRef.current.style.display = 'block'; // 显示录制视频元素
      recPlayerRef.current.src = URL.createObjectURL(new Blob(buffer, { type: 'video/webm' })); // 设置视频源
      recPlayerRef.current.play().catch(console.error); // 播放视频
    }
  };

  // 下载录制的视频
  const downloadRecording = () => {
    const blob = new Blob(buffer, { type: 'video/webm' }); // 创建 Blob 对象
    const url = URL.createObjectURL(blob); // 创建下载链接
    const a = document.createElement('a'); // 创建下载链接元素
    a.href = url;
    a.style.display = 'none'; // 隐藏链接
    a.download = 'recorded-video.webm'; // 设置下载文件名
    document.body.appendChild(a); // 添加链接到文档
    a.click(); // 触发下载
    document.body.removeChild(a); // 移除链接
  };

  return (
    <div>
      {/* 音频输入源选择框 */}
      <div className="select">
        <label htmlFor="audioSource">音频输入源: </label>
        <select id="audioSource" ref={audioInputRef}></select>
      </div>

      {/* 音频输出目标选择框 */}
      <div className="select">
        <label htmlFor="audioOutput">音频输出目标: </label>
        <select id="audioOutput" ref={audioOutputRef}></select>
      </div>

      {/* 视频源选择框 */}
      <div className="select">
        <label htmlFor="videoSource">视频源: </label>
        <select id="videoSource" ref={videoSourceRef}></select>
      </div>

      {/* 滤镜选择框 */}
      <div className="select">
        <label htmlFor="filter">滤镜: </label>
        <select id="filter" ref={filtersRef}>
          <option value="none">无</option>
          <option value="blur">模糊</option>
          <option value="grayscale">灰度</option>
          <option value="invert">反转</option>
          <option value="sepia">怀旧</option>
          <option value="saturate">饱和度</option>
          <option value="hue-rotate">色相旋转</option>
          <option value="opacity">透明度</option>
          <option value="brightness">亮度</option>
          <option value="contrast">对比度</option>
          <option value="drop-shadow">阴影</option>
        </select>
          {/* 捕获图片按钮 */}
      <div>
        <Button type="primary" onClick={captureImage} style={{ margin: 8 }}>捕获图片</Button>
          {/* 开始/停止录制按钮 */}
        <Button type="primary" onClick={() => { recording ? stopRecord() : startRecord(); setRecording(!recording); }} style={{ margin: 8 }}>
            {recording ? '停止录制' : '开始录制'}
          </Button>
          <Button type="primary" onClick={playRecording} disabled={!buffer.length} style={{ margin: 8 }}>播放</Button>
          <Button type="primary" onClick={downloadRecording} disabled={!buffer.length} style={{ margin: 8 }}>下载</Button>
          <Button type="primary" onClick={() => { cameraStatus ? startCamera() : stopCamera(); setCameraStatus(!cameraStatus); }} style={{ margin: 8 }}>
            {cameraStatus ? '打开摄像头' : '关闭摄像头'}
          </Button>
      </div>
      </div>

      {/* 视频播放和录制控制 */}
      <video ref={videoRef} autoPlay playsInline></video> {/* 视频播放元素 */}
      <video ref={recPlayerRef} controls style={{ display: 'none' }}></video> {/* 录制回放元素 */}
      {/* 捕获图片 */}
      <div>
        <canvas ref={pictureRef} width="320" height="240"></canvas>
      </div>
    </div>
  );
};

export default Video;
